{{Strip}}
{{Extend "base"}}
{{Block "description"}}{{"安装向导"|$.T}}{{/Block}}
{{Block "title"}}{{"安装向导"|$.T}}{{/Block}}
{{Block "head"}}
<link href="{{AssetsURL}}/js/fuelux/css/fuelux.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{AssetsURL}}/js/jquery.nanoscroller/nanoscroller.css" />
<link rel="stylesheet" type="text/css" href="{{AssetsURL}}/js/bootstrap.slider/css/slider.css" />
<!-- <link rel="stylesheet" type="text/css" href="{{AssetsURL}}/css/form/checkbox.min.css" /> -->
{{/Block}}
{{Block "themeColor"}}#26262E{{/Block}}
{{Block "bodyAttr"}} class="texture"{{/Block}}
{{Block "main"}}{{$data := $.Stored.data}}
<div id="cl-wrapper" class="login-container">
	<div class="middle-login" style="top:30%">
		<div class="wizard-row" style="position:static">
			<div class="col-md-12 fuelux">
				<div class="block-wizard">
					<div class="header hd-block-flat" style="margin:0 -1px;border-radius:3px 3px 0 0">
						<h3 class="text-center"><img class="logo-img" src="{{AssetsURL}}/images/logo.png" alt="logo" />{{"安装Nging"|$.T}}
						</h3>
					</div>
					<div id="wizard1" class="wizard wizard-ux" style="margin:0 -1px">
						<div class="steps-container">
							<ul class="steps">
								<li data-step="1" class="active" data-toggle="tooltip" title="{{`数据库信息`|$.T}}">
									<span class="badge badge-info">1</span>
									<span class="chevron"></span>
								</li>
								<li data-step="2" data-toggle="tooltip" title="{{`管理员信息`|$.T}}">
									<span class="badge">2</span>
									<span class="chevron"></span>
								</li>
							</ul>
						</div><!-- .steps-container -->
						<div class="actions">
							<button type="button" class="btn btn-xs btn-prev btn-default">
								<i class="glyphicon glyphicon-arrow-left"></i>
								{{"上一步"|$.T}}
							</button>
							<button type="button" class="btn btn-xs btn-next btn-default" data-last="{{`开始安装`|$.T}}">
								{{"下一步"|$.T}}
								<i class="glyphicon glyphicon-arrow-right" style="margin-left:5px"></i>
							</button>
						</div>
						<form class="form-horizontal" action="" data-parsley-validate novalidate method="POST" id="form-setup">
						<div class="step-content" style="padding:30px;padding-top:0">
								<div class="step-pane active" data-step="1">
									<div class="form-group no-padding no-margin-top">
										<div class="col-sm-12">
											<h3 class="hthin">1. {{"数据库信息"|$.T}}</h3>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`数据库类型`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-align-justify"></i></span>
												<select name="type" id="database-type" data-parsley-trigger="change" data-parsley-errors-container="#type-error" required class="form-control">
													{{$type := $data.Type}}
													{{range $k, $v := $.Stored.dbEngines}}
													<option value="{{$v.K}}" {{if eq $type $v.K}} selected{{end}}>{{$v.V}}</option>
													{{end}}
												</select>
											</div>
											<div id="type-error"></div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`主机地址`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-globe"></i></span>
												<input type="text" name="host" id="database-host" data-parsley-trigger="change" data-parsley-errors-container="#host-error" required placeholder="{{`主机地址`|$.T}}" class="form-control" value="{{$data.Host|Default `127.0.0.1:3306`}}">
											</div>
											<div id="host-error"></div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`数据库登录名`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-user"></i></span>
												<input type="text" name="user" id="database-user" data-parsley-trigger="change" data-parsley-errors-container="#user-error" required placeholder="{{`数据库登录名`|$.T}}" class="form-control" value="{{$data.User|Default `root`}}">
											</div>
											<div id="user-error"></div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`数据库密码`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-lock"></i></span>
												<input type="password" id="database-password" name="password" data-parsley-trigger="change" data-parsley-errors-container="#password-error" placeholder="{{`数据库密码`|$.T}}" class="form-control" value="{{$data.Password}}">
											</div>
											<div id="password-error"></div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`数据库名称`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-folder"></i></span>
												<input type="text" name="database" id="database-name" data-parsley-trigger="change" data-parsley-errors-container="#database-error" required placeholder="{{`数据库名称`|$.T}}" class="form-control" value="{{$data.Database|Default $.Stored.defaultDBName}}">
											</div>
											<div id="database-error"></div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`字符集`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-language"></i></span>
												<select name="charset" id="database-charset" class="form-control">{{$charset:=$data.Charset}}
													<option value="utf8mb4"{{if eq $charset `utf8mb4`}} selected{{end}}>utf8mb4</option>
													<option value="utf8"{{if eq $charset `utf8`}} selected{{end}}>utf8</option>
												</select>
											</div>
											<div class="help-block text-muted">
												{{`如果MySQL数据库的版本低于5.7，请选择utf8`|$.T}}
											</div>
										</div>
									</div>

									<div class="form-group">
										<div class="col-sm-12 text-center">
											<button class="btn btn-default" type="reset">{{"取消"|$.T}}</button>
											<button class="btn btn-primary wizard-next" type="button">
												{{"下一步"|$.T}} 
												<i class="fa fa-caret-right"></i>
											</button>
										</div>
									</div>
								</div>
								<div class="step-pane" data-step="2">
									<div class="form-group no-padding no-margin-top">
										<div class="col-sm-12">
											<h3 class="hthin">2. {{"管理员信息"|$.T}}</h3>
										</div>
									</div>


									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`管理员用户名`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-user"></i></span>
												<input type="text" name="adminUser" data-parsley-trigger="change"
													parsley-error-container="#adminUser-error" required placeholder="{{`管理员用户名`|$.T}}" class="form-control" value="{{$data.AdminUser|Default `admin`}}">
											</div>
											<div id="adminUser-error"></div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`管理员Email`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
												<input type="email" name="adminEmail" data-parsley-trigger="change" data-parsley-errors-container="#adminEmail-error" required placeholder="{{`管理员Email`|$.T}}" class="form-control" value="{{$data.AdminEmail}}">
											</div>
											<div id="adminEmail-error"></div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`管理员密码`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-lock"></i></span>
												<input id="pass1" type="password" name="adminPass" data-parsley-trigger="change" data-parsley-errors-container="#adminPass-error" required placeholder="{{`管理员密码`|$.T}}" class="form-control" value="{{$data.AdminPass}}">
											</div>
											<div id="adminPass-error"></div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-12">
											<div class="input-group" data-toggle="tooltip" title="{{`确认管理员密码`|$.T}}">
												<span class="input-group-addon"><i class="fa fa-lock"></i></span>
												<input type="password" name="confirmPass" data-parsley-equalto="#pass1" data-parsley-trigger="change" data-parsley-errors-container="#confirmPass-error" required placeholder="{{`确认管理员密码`|$.T}}" class="form-control" value="{{$data.AdminPass}}">
											</div>
											<div id="confirmPass-error"></div>
										</div>
									</div>
									{{- $policy := call $.Func.policy -}}
									{{- if $policy -}}
									<div class="form-group">
										<div class="col-sm-12">
											<div>
											<div class="checkbox no-padding-top">
												<input type="checkbox" name="agreePolicy" value="1"{{if eq ($.Form `agreePolicy`) `1`}} checked{{end}} id="checkbox-agree-policy">
												<label for="checkbox-agree-policy">
													<small>&nbsp;{{"我已阅读并同意"|$.T}}</small>
												</label>
												<small>
												{{- range $k, $v := $policy -}}
													{{- if gt $k 0 -}}、{{- end -}}
													<a href="javascript:;" data-toggle="modal" data-target="#policy-{{$k}}">{{$v.K|$.T}}</a>
												{{- end -}}
												</small>
											</div>
											<div id="policy-error"></div>
											</div>
										</div>
									</div>
									{{- end -}}



									<div class="form-group">
										<div class="col-sm-12 text-center">
											<button type="button" class="btn btn-default wizard-previous">
												<i class="fa fa-caret-left"></i> 
												{{"上一步"|$.T}}
											</button>
											<button type="submit" class="btn btn-success">
												<i class="fa fa-check"></i> 
												{{"安装"|$.T}}
											</button>
										</div>
									</div>
								</div>

								<div class="text-center">
									<a href="{{OfficialHomepage}}" target="_blank">&copy; {{Now.Year}} {{Version}}</a>
								</div>
						</div><!-- .step-content -->
					</form>
					</div><!-- .wizard -->
				</div><!-- .block-wizard -->
			</div><!-- .fuelux -->
		</div><!-- .wizard-row -->

	</div><!-- .middle-login -->

</div><!-- .login-container -->
{{/Block}}
{{Block "footer"}}
{{- $policy := call $.Func.policy -}}
{{- if $policy -}}
{{- range $k, $v := $policy -}}
<div class="modal fade colored-header" id="policy-{{$k}}" tabindex="-1" role="dialog">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
			<h3>{{- $v.K|$.T -}}</h3>
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		</div>
		<div class="modal-body">
			{{- $v.V|ToHTML -}}
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-default" data-dismiss="modal">{{`关闭`|$.T}}</button>
		</div>
	  </div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
{{- end -}}
{{- end -}}
<script type="text/template" id="progress-template">
	<div id="install-progress" style="position:absolute !important;z-index:9990;width:100%;height:100%;">
		<div style="opacity:0.8;position:absolute !important;z-index:9999;width:100%;height:100%;background:#000;"></div>
		<div style="position:absolute !important;z-index:9999;width:100%;top:40%;" class="text-center">
		<div style="color:white;font-size:30px" id="install-progress-summary"><i class="fa fa-spinner fa-spin"></i> {{`安装中，请稍候`|$.T}}...</div>
		<div class="progress progress-striped active" style="width:100%;height:50px;">
			<div class="progress-bar progress-bar-info" id="install-progress-bar" style="width:0%;line-height:50px;font-size:30px">0%</div>
		</div>
		</div>
	</div>
</script>
<script type="text/javascript" src="{{AssetsURL}}/js/jquery.parsley/parsley.min.js"></script>
<script type="text/javascript" src="{{AssetsURL}}/js/jquery.parsley/i18n/{{$.Lang.Format false `_`}}.js" charset="utf-8"></script>
<script type="text/javascript" src="{{AssetsURL}}/js/fuelux/js/fuelux.min.js"></script>
<script type="text/javascript" src="{{AssetsURL}}/js/bootstrap.slider/js/bootstrap-slider.min.js"></script>
<script type="text/javascript">
function fetchProgress() {
	if ($('#install-progress').length < 1) {
		$('body').append($('#progress-template').html());
		$(window).on('resize', function () {
			$('#install-progress').css('height', $(document).height() + 'px');
		}).trigger('resize');
	}
	var t = window.setInterval(function () {
		if ($('#install-progress').length < 1) {
			window.clearInterval(t);
			return;
		}
		$.get('{{BackendURL}}/progress', {}, function (r) {
			if (r.Code != 1) {
				window.clearInterval(t);
				$('#install-progress-bar').css('width', '100%').text('100%');
				$('#install-progress').remove();
				return;
			}
			var progress = (r.Data.Finished / r.Data.TotalSize) * 100;
			if (progress >= 100) window.clearInterval(t);
			var percent = progress.toFixed(2) + '%';
			$('#install-progress-bar').css('width', percent).text(percent);
		}, 'json');
	}, 1000);
}
$(function () {
	App.wizard();
	$('#database-type').on('change', function () {
		var dbName = $('#database-name').val();
		switch ($(this).val()) {
			case 'mysql':
				var showInputs = ['host', 'user', 'password', 'name', 'charset'];
				for (var i = 0; i < showInputs.length; i++) {
					$('#database-' + showInputs[i]).closest('.form-group').show();
				}
				$('#database-name').val(dbName.replace(/\.db$/g, ''));
				break;
			case 'sqlite':
				var hideInputs = ['host', 'user', 'password', 'charset'];
				for (var i = 0; i < hideInputs.length; i++) {
					var field = hideInputs[i];
					if ($('#database-' + field).val() == '') $('#database-' + field).val('none');
					$('#database-' + field).closest('.form-group').hide();
				}
				if (dbName == '') {
					$('#database-name').val('nging.db');
				} else {
					$('#database-name').val(dbName.replace(/\.db$/g, '') + '.db');
				}
				break;
		}
	}).trigger('change');
	$('#checkbox-agree-policy').on('click',function(){
		if(this.checked){
			$('#policy-error').hide();
		}else{
			$('#policy-error').show();
		}
	});
	$('[data-toggle="tooltip"]').tooltip();
	$('#form-setup').on('submit', function (e) {
		e.preventDefault();
		if($('#checkbox-agree-policy').length>0 && !$('#checkbox-agree-policy').prop('checked')){
			$('#policy-error').html('<ul class="parsley-errors-list no-margin"><li><small>{{`👆必须勾选此项才能安装`|$.T}}</small></li></ul>').show();
			return App.message({text:App.t('必须同意相关协议才能安装，请勾选'),type:'warning'});
		}
		$.post(window.location.href, $(this).serializeArray(), function (r) {
			if (r.Code != 1) {
				if ($('#install-progress').length > 0) $('#install-progress').remove();
				var pane = $('.parsley-error:first').parents('.step-pane');
				pane.removeClass('active').addClass('active').siblings('.active').removeClass('active');
				$('li[data-target="#' + pane.attr('id') + '"]').removeClass('active').addClass('active').siblings('.active').removeClass('active');
				return App.message({ title: '{{"系统消息"|$.T}}', text: r.Info, class_name: 'error' });
			}
			$('#install-progress-summary').html('<i class="fa fa-smile-o"></i> ' + r.Info);
			App.message({ title: '{{"系统消息"|$.T}}', text: r.Info, class_name: 'success' });
			window.setTimeout(function () {
				window.location = '{{BackendURL}}/';
			}, 2000);
		}, 'json');
		fetchProgress();
		return false;
	});
});
</script>
{{/Block}}
{{/Strip}}